<template>
  <div class="wrapper-container">
    <div class="box">
      <!--弹出框头部-->
      <div class="popOver-header">
        <!--弹出框图标-->
        <span class="popOver-tip">信&nbsp;息&nbsp;修&nbsp;改</span>
        <!--关闭图标-->
        <span class="popOver-close el-icon-circle-close" @click="closePopOver">&nbsp;Close</span>
      </div>
      <!--分隔线-->
      <hr class="split-line"/>
      <!--弹出框主体-->
      <div class="popOver-body">
        <StuAward class="data-card-style" v-show="show.if_stuAward"/>
        <TeacContest class="data-card-style" v-show="show.if_teacContest"/>
        <TeacItem class="data-card-style" v-show="show.if_teacItem" />
        <EduReformItem class="data-card-style" v-show="show.if_eduReformItem" />
        <EduReformPaper class="data-card-style" v-show="show.if_eduReformPaper"/>
        <SciSerrchItem class="data-card-style" v-show="show.if_sciSerrchItem"/>
        <SciSerrchPaper class="data-card-style" v-show="show.if_sciSerrchPaper"/>
        <SciresearchAward class="data-card-style" v-show="show.if_sciresearchAward"/>
        <PublishBook class="data-card-style" v-show="show.if_publishBook"/>
        <PublishTreatise class="data-card-style" v-show="show.if_publishTreatise"/>
        <PublishPatent class="data-card-style" v-show="show.if_publishPatent"/>
        <PublishSoftWork class="data-card-style" v-show="show.if_publishSoftWork"/>
      </div>

    </div>
  </div>
</template>

<script>
import StuAward from '@/components/modifyInfo/StuAward.vue'
import TeacContest from '@/components/modifyInfo/TeacContest'
import TeacItem from '@/components/modifyInfo/TeacItem'
import EduReformItem from '@/components/modifyInfo/EduReformItem'
import EduReformPaper from '@/components/modifyInfo/EduReformPaper'
import SciSerrchPaper from '@/components/modifyInfo/SciSerrchPaper'
import SciSerrchItem from '@/components/modifyInfo/SciSerrchItem'
import SciresearchAward from '@/components/modifyInfo/SciresearchAward'
import PublishBook from '@/components/modifyInfo/PublishBook'
import PublishTreatise from  '@/components/modifyInfo/PublishTreatise'
import PublishPatent from '@/components/modifyInfo/PublishPatent'
import PublishSoftWork from '@/components/modifyInfo/PublishSoftWork'
export default {
  name: "EditPopOver",
  props:['transInfo'],
  components: {
    StuAward,//学生获奖
    TeacContest,//教学竞赛
    TeacItem,//教学项目
    EduReformItem,//教改项目
    EduReformPaper,//教改论文
    SciSerrchItem,//科研项目
    SciSerrchPaper,//科研论文
    SciresearchAward,//科研奖项
    PublishBook,//出版教材
    PublishTreatise,//出版专著
    PublishPatent,//专利申请
    PublishSoftWork,//软著申请
  },
  data(){
    return {
      show:{
        if_stuAward:false,
        if_teacContest:false,
        if_teacItem:false,
        if_eduReformItem:false,
        if_eduReformPaper:false,
        if_sciSerrchPaper:false,
        if_sciSerrchItem:false,
        if_sciresearchAward:false,
        if_publishBook:false,
        if_publishTreatise:false,
        if_publishPatent:false,
        if_publishSoftWork:false,
      },

    }
  },
  computed:{

  },
  //侦听器
  watch:{
    transInfo:function (newVal){
      //判空处理
      if (newVal&&newVal.type&&newVal.data){
        this.hideSubControls();
        //判断数据类型
        switch (newVal.type){
          case "学生奖项":{
            //渲染学生奖项信息
            console.log("渲染学生奖项信息")
            this.show.if_stuAward=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
          case "教学项目":{
            //渲染教学项目信息
            console.log("渲染教学项目信息")
            this.show.if_teacItem=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
          case "教学竞赛":{
            //渲染教学竞赛信息
            console.log("渲染教学竞赛信息")
            this.show.if_teacContest=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
          case "教改项目":{
            //渲染教改项目信息
            console.log("渲染教改项目信息")
            this.show.if_eduReformItem=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
          case "教学论文":{
            //渲染教改论文信息
            console.log("渲染教改论文信息")
            this.show.if_eduReformPaper=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
          case "科研项目":{
            //渲染科研项目信息
            console.log("渲染科研项目信息")
            this.show.if_sciSerrchItem=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
          case "科研论文":{
            //渲染科研论文信息
            console.log("渲染科研论文信息")
            this.show.if_sciSerrchPaper=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
          case "科研奖项":{
            //渲染科研奖项信息
            console.log("渲染科研奖项信息")
            this.show.if_sciresearchAward=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
          case "出版教材":{
            //渲染出版教材信息
            console.log("渲染出版教材信息")
            this.show.if_publishBook=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
          case "出版专著":{
            //渲染出版教材信息
            console.log("渲染出版专著信息")
            this.show.if_publishTreatise=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
          case "专利发表":{
            //渲染专利发表信息
            console.log("渲染专利发表信息")
            this.show.if_publishPatent=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
          case "软著申请":{
            //渲染软著申请信息
            console.log("渲染软著申请信息")
            this.show.if_publishSoftWork=true;
            //store变量值修改
            this.$store.dispatch("setEditDataAsync",newVal)
            break;
          }
        }
      }
    }
  },
  methods:{
    //控制状态
    hideSubControls(){
      for (let showKey in this.show) {
        this.show[showKey]=false;
      }
    },
    //关闭窗口
    closePopOver(){
      let state = this.$store.state.isShowPopOver;
      console.log(state)
      //修改store状态值-控制窗口隐藏
      this.$store.commit("setIsShowPopOver",!state);
    }
  }
}
</script>

<style scoped>
.wrapper-container{
  display: block;
  margin: 0 auto;
  position: absolute;
  width: 87%;
  height: 600px;
  background-color: transparent;
  /*box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);*/
  z-index: 999;
}
.box{
  margin: 0 auto;
  padding: 15px;
  width: 800px;
  /*height: 800px;*/
  background-color: #002739;
  /*opacity: 0.8;*/
  border: 2px solid #73ffff;
  border-radius: 5px;
  box-shadow: 0 5px 15px 0 rgb(0 0 0 / 30%);
}

.popOver-header{
  height: 50px;
}

.popOver-tip{
  display: inline-block;
  float: left;
  width: 150px;
  height: 40px;
  line-height: 40px;
  color: purple;
  font-weight: 700;
  background-color: #8c939d;
  border-top-left-radius: 25px;
  border-bottom-right-radius: 25px;
}
.popOver-close{
  display: inline-block;
  float: right;
  width: 80px;
  height: 30px;
  color: black;
  line-height: 30px;
  border: 1px solid #ccc;
  border-radius: 15px;
  background-color: #E6A23C;
  cursor: pointer;
}
.split-line{
  color: #fff;
}
.popOver-body{
  background-color: #fff;
  /*height: 720px;*/
}
.data-card-style{

}
</style>